<template>
    <el-dialog 
        v-model="dialogVisible" 
        :title="props.title"
        :width="props.width"
    >
        <slot></slot>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">{{ cancelName }}</el-button>
                <el-button type="primary" @click="confirm">{{ confirmName }}</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
    import { ref} from 'vue'
    import type { FormInstance, FormRules } from 'element-plus'

    const props = defineProps({
        title: {
            type: String,
            required: true
        },
        rules: {
            type: Object,
            required: false
        },
        width: {
            type:String,
            default: '50%'
        },
        cancelName: {
            type: String,
            default: '取消'
        },
        confirmName: {
            type: String,
            default: '确认'
        }
    })
    // 定义发射给父组件的方法
    const emits = defineEmits(['cancel', 'confirm'])
    const dialogVisible = ref(false);

    // 打开对框
    const openDialog = () => {
        dialogVisible.value = true
    }

    const cancel = () => {
        emits('cancel')
        dialogVisible.value = false
    }

    const confirm = () => {
        emits('confirm', {
            callback: (result: any) => {
                if(result) {
                    dialogVisible.value = false
                }
	        }
        }) 
    }

    // 第二部：暴露方法
	defineExpose({
		openDialog
	})
</script>
<style scoped>
</style>